  <?php
		session_start(); 
		include "function/libfunc.php";
 			if (!empty($_SESSION['username']) && !empty($_SESSION['password'])) { 
		  	$link="Tambah Member";
		  	include 'themes/head2.php';
			include 'themes/heading.php';
?>

     <link href="plugins/forms/select/select2.css" type="text/css" rel="stylesheet" />    
    <link href="plugins/forms/ibutton/jquery.ibutton.css" type="text/css" rel="stylesheet" />

    <script type="text/javascript">
    // document ready function
   // common variables
var iBytesUploaded = 0;
var iBytesTotal = 0;
var iPreviousBytesLoaded = 0;
var iMaxFilesize = 1048576; // 1MB
var oTimer = 0;
var sResultFileSize = '';

function secondsToTime(secs) { // we will use this function to convert seconds in normal time format
    var hr = Math.floor(secs / 3600);
    var min = Math.floor((secs - (hr * 3600))/60);
    var sec = Math.floor(secs - (hr * 3600) -  (min * 60));

    if (hr < 10) {hr = "0" + hr; }
    if (min < 10) {min = "0" + min;}
    if (sec < 10) {sec = "0" + sec;}
    if (hr) {hr = "00";}
    return hr + ':' + min + ':' + sec;
};

function bytesToSize(bytes) {
    var sizes = ['Bytes', 'KB', 'MB'];
    if (bytes == 0) return 'n/a';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
};

function fileSelected() {

    // hide different warnings
    document.getElementById('upload_response').style.display = 'none';
    document.getElementById('error').style.display = 'none';
    document.getElementById('error2').style.display = 'none';
    document.getElementById('abort').style.display = 'none';
    document.getElementById('warnsize').style.display = 'none';

    // get selected file element
    var oFile = document.getElementById('image_file').files[0];

    // filter for image files
    var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
    if (! rFilter.test(oFile.type)) {
        document.getElementById('error').style.display = 'block';
        return;
    }

    // little test for filesize
    if (oFile.size > iMaxFilesize) {
        document.getElementById('warnsize').style.display = 'block';
        return;
    }

    // get preview element
    var oImage = document.getElementById('preview');

    // prepare HTML5 FileReader
    var oReader = new FileReader();
        oReader.onload = function(e){

        // e.target.result contains the DataURL which we will use as a source of the image
        oImage.src = e.target.result;

        oImage.onload = function () { // binding onload event

            // we are going to display some custom image information here
            sResultFileSize = bytesToSize(oFile.size);
            document.getElementById('fileinfo').style.display = 'block';
            document.getElementById('filename').innerHTML = 'Name: ' + oFile.name;
            document.getElementById('filesize').innerHTML = 'Size: ' + sResultFileSize;
            document.getElementById('filetype').innerHTML = 'Type: ' + oFile.type;
            document.getElementById('filedim').innerHTML = 'Dimension: ' + oImage.naturalWidth + ' x ' + oImage.naturalHeight;
        };
    };

    // read selected file as DataURL
    oReader.readAsDataURL(oFile);
}

function startUploading() {
    // cleanup all temp states
    iPreviousBytesLoaded = 0;
    document.getElementById('upload_response').style.display = 'none';
    document.getElementById('error').style.display = 'none';
    document.getElementById('error2').style.display = 'none';
    document.getElementById('abort').style.display = 'none';
    document.getElementById('warnsize').style.display = 'none';
    document.getElementById('progress_percent').innerHTML = '';
    var oProgress = document.getElementById('progress');
    oProgress.style.display = 'block';
    oProgress.style.width = '0px';

    // get form data for POSTing
    //var vFD = document.getElementById('upload_form').getFormData(); // for FF3
    var vFD = new FormData(document.getElementById('upload_form')); 

    // create XMLHttpRequest object, adding few event listeners, and POSTing our data
    var oXHR = new XMLHttpRequest();
    oXHR.upload.addEventListener('progress', uploadProgress, false);
    oXHR.addEventListener('load', uploadFinish, false);
    oXHR.addEventListener('error', uploadError, false);
    oXHR.addEventListener('abort', uploadAbort, false);
    oXHR.open('POST', 'upload.php');
    oXHR.send(vFD);

    // set inner timer
    oTimer = setInterval(doInnerUpdates, 300);
}

function doInnerUpdates() { // we will use this function to display upload speed
    var iCB = iBytesUploaded;
    var iDiff = iCB - iPreviousBytesLoaded;

    // if nothing new loaded - exit
    if (iDiff == 0)
        return;

    iPreviousBytesLoaded = iCB;
    iDiff = iDiff * 2;
    var iBytesRem = iBytesTotal - iPreviousBytesLoaded;
    var secondsRemaining = iBytesRem / iDiff;

    // update speed info
    var iSpeed = iDiff.toString() + 'B/s';
    if (iDiff > 1024 * 1024) {
        iSpeed = (Math.round(iDiff * 100/(1024*1024))/100).toString() + 'MB/s';
    } else if (iDiff > 1024) {
        iSpeed =  (Math.round(iDiff * 100/1024)/100).toString() + 'KB/s';
    }

    document.getElementById('speed').innerHTML = iSpeed;
    document.getElementById('remaining').innerHTML = '| ' + secondsToTime(secondsRemaining);
}

function uploadProgress(e) { // upload process in progress
    if (e.lengthComputable) {
        iBytesUploaded = e.loaded;
        iBytesTotal = e.total;
        var iPercentComplete = Math.round(e.loaded * 100 / e.total);
        var iBytesTransfered = bytesToSize(iBytesUploaded);

        document.getElementById('progress_percent').innerHTML = iPercentComplete.toString() + '%';
        document.getElementById('progress').style.width = (iPercentComplete * 4).toString() + 'px';
        document.getElementById('b_transfered').innerHTML = iBytesTransfered;
        if (iPercentComplete == 100) {
            var oUploadResponse = document.getElementById('upload_response');
            oUploadResponse.innerHTML = '<h1>Please wait...processing</h1>';
            oUploadResponse.style.display = 'block';
        }
    } else {
        document.getElementById('progress').innerHTML = 'unable to compute';
    }
}

function uploadFinish(e) { // upload successfully finished
    var oUploadResponse = document.getElementById('upload_response');
    oUploadResponse.innerHTML = e.target.responseText;
    oUploadResponse.style.display = 'block';

    document.getElementById('progress_percent').innerHTML = '100%';
    document.getElementById('progress').style.width = '400px';
    document.getElementById('filesize').innerHTML = sResultFileSize;
    document.getElementById('remaining').innerHTML = '| 00:00:00';

    clearInterval(oTimer);
}

function uploadError(e) { // upload error
    document.getElementById('error2').style.display = 'block';
    clearInterval(oTimer);
}  

function uploadAbort(e) { // upload abort
    document.getElementById('abort').style.display = 'block';
    clearInterval(oTimer);
}
</script>

                    <div class="row-fluid">

                        <div class="span9">

                            <div class="box">

                                <div class="title">

                                    <h4>
                                        <span class="icon16 icomoon-icon-equalizer-2"></span>
                                        <span><?php echo $link; ?></span>
                                    </h4>
                                    
                                </div>
                              <div class="content">
                               <div class="upload_form_cont">
                               <form id="upload_form" enctype="multipart/form-data" method="post" action="fctambahmember.php"> 
                              
  
                                        <div class="form-row row-fluid">
                                            <div class="span12">
                                                <div style="margin-top:45px" class="row-fluid">
                                                   <label class="form-label span3" for="file">Photo:</label>
                                                     <input  class="span12" type="file" name="image_file" id="image_file" onChange="fileSelected();" />
                                                     
                                                     <img style="margin-top:-70px" class="img-circle" width="100px" height="100px" id="preview" />
                                                </div>
                                            </div>  
                                        </div>

                                <div class="form-row row-fluid">
                                    <div class="span12">
                                        <div class="row-fluid">
                                            <label class="form-label span3" for="name">Nama:</label>
                                            <input class="span7" id="nama" type="text" name="nama" required />
                                            
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-row row-fluid">
                                    <div class="span12">
                                        <div class="row-fluid">
                                            <label class="form-label span3" for="email">Email:</label>
                                            <input class="span7" id="email" type="text" name="email"  required />
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-row row-fluid">
                                    <div class="span12">
                                        <div class="row-fluid">
                                            <label class="form-label span3" for="normal">Password:</label>
  
                                                <input class="span7" id="password" name="password" type="password"  required /> 
  
                                        </div>
                                    </div>
                                </div>
                                
                                  <div class="form-row row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid">
                                                    <label class="form-label span3" for="checkboxes">Kabupaten:</label>
                                                    <div class="span7 controls">   
                                                        <select name="ongkos" id="ongkos">
                                        <?php
                                        $link = koneksi_db();
                                        $sql = "select * from ongkos ORDER BY kabupaten ASC";
                                        $hasil = mysql_query($sql,$link) or exit("Error query: <b>".$sql."</b>.");
										while($data1= mysql_fetch_assoc($hasil)){
										?>
                                                            <option value="<?php echo $data1['idongkos']; ?>"><?php echo $data1['kabupaten']; ?></option>
                                                            <?php
															}
															?>
                                                        </select>
                                                    </div> 
                                                </div>
                                            </div> 
                                        </div>
                                        
                                        <div class="form-row row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid">
                                                    <label class="form-label span3" for="checkboxes">Provinsi:</label>
                                                    <div class="span7 controls">   
                                                        <select  name="provinsi" id="provinsi">
                                        <?php
                                        $link = koneksi_db();
                                        $sql = "select * from ongkos ORDER BY provinsi ASC";
                                        $hasil = mysql_query($sql,$link) or exit("Error query: <b>".$sql."</b>.");
										while($data1= mysql_fetch_assoc($hasil)){
										?>
                                                            <option ><?php echo $data1['provinsi']; ?></option>
                                                            <?php
															}
															?>
                                                        </select>
                                                    </div> 
                                                </div>
                                            </div> 
                                        </div>
   
                                
                                <div class="form-row row-fluid">
                                    <div class="span12">
                                        <div class="row-fluid">
                                            <label class="form-label span3" for="email">Kode Pos:</label>
                                            <input class="span7" id="kodepos" type="text" name="kodepos" required />
                                        </div>
                                    </div>
                                </div>

                                <div class="form-row row-fluid">
                                    <div class="span12">
                                        <div class="row-fluid">
                                            <label class="form-label span3" for="textarea">Alamat:</label>
                                            <textarea name="alamat" class="span7 limit elastic" id="alamat" rows="3" cols="5" required></textarea>
                                        </div>
                                    </div>  
                                </div>
                                
                                 <div class="form-row row-fluid">
                                    <div class="span12">
                                        <div class="row-fluid">
                                            <label class="form-label span3" for="email">Telepon:</label>
                                            <input class="span7" id="tlp" type="text" name="tlp" required />
                                        </div>
                                    </div>
                                </div>
                                                                
                                 <div class="form-row row-fluid">
                                    <div class="span12">
                                        <div class="row-fluid">
                                            <label class="form-label span3" for="email">Poin:</label>
                                            <input class="span7" id="poin" type="text" name="poin"/>
                                        </div>
                                    </div>
                                </div>
                                
                                 <div class="form-row row-fluid">
                                    <div class="span12">
                                        <div class="row-fluid">
                                            <label class="form-label span3" for="email">kode media:</label>
                                            <input class="span7" id="poin" type="text" name="idmedia"/>
                                        </div>
                                    </div>
                                </div>

                                
                                <div class="form-row row-fluid">        
                                    <div class="span12">
                                        <div class="row-fluid">
                                            <div class="form-actions">
                                            <div class="span2"></div>
                                            <div class="span10 controls">
                                                <button type="submit" class="btn btn-primary" class="submit"> Simpan</button>
                                                <button class="btn btn-warning" onclick="goBack()">Batalkan</button>
                                               
                                               
                                                                                 </div>
                                            </div>
                                        </div>
                                    </div>   
                                </div>
                                

                    <div id="error"></div>
                    <div id="error2"></div>
                    <div id="abort"></div>
                    <div id="warnsize"></div>

                    <div id="progress_info">
                        <div id="progress"></div>
                        <div id="progress_percent">&nbsp;</div>
                        <div class="clear_both"></div>
                        <div>
                            <div id="speed">&nbsp;</div>
                            <div id="remaining">&nbsp;</div>
                            <div id="b_transfered">&nbsp;</div>
                            <div class="clear_both"></div>
                        </div>
                        <div id="upload_response"></div>
                                </form>
								</div>
                                
                                   
                              </div>
                              
                      </div>
                      
               </div>
   </div>
    <script type="text/javascript" src="plugins/forms/select/select2.min.js"></script>    
    <script type="text/javascript" src="plugins/forms/ibutton/jquery.ibutton.min.js"></script>
    <script type="text/javascript" src="themes/adminv1/js/file.js"></script>
    <script type="text/javascript" src="js/empty.js"></script><!-- Init plugins only for page -->

                        
 <?php   
    }else {
echo "<script language='javascript'>window.location = '../admin/'</script>";
}
?>
